<!--聊天列表的主界面!-->
<template>
    <div class="chatList">
        <van-nav-bar
                title="聊天页"
                class="header"
                left-text=""
                left-arrow
                @click-left="jumpPage('/')">
        </van-nav-bar>
        <div class="languageSelect">
            <van-picker
                title="语言选择"
                show-toolbar
                :columns="columns"
                @confirm="onConfirm"
                @cancel="onCancel"
                @change="onChange"
                />
        </div>

    </div>
</template>
<script>
import bus from "./../../utils/bus"
    export default {
        data() {
            return {
                columns: ['中文', '英文', '法文'],
            }
        },
        methods: {
            onConfirm(value, index) {
                Toast(`当前值：${value}, 当前索引：${index}`);
            },
            onChange(picker, value, index) {
                Toast(`当前值：${value}, 当前索引：${index}`);
            },
            onCancel() {
                Toast('取消');
            },

            jumpPage(para) {
                this.$router.push(para)
                },
        },
        mounted() {
            this.getChatList();
            //监听函数
            bus.$on('onmessage',dt =>{
                this.onmessage(dt);
            })
        }
    }
</script>
<style scoped>
    .chatList {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .chatList .header{
        background-color: #153744;
        color: #ffffff;
    }
    /deep/ .van-nav-bar .van-icon {
        color: #ffffff;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        color: #ffffff;
    }

    .notfound{
        display: flex;
        overflow-y: auto;
    }
    .notfound img{
        width: 100%;
        height: 100%;
    }
    .chatlistitem {
        height: 5rem;
        display: flex;
    }
    .chatlistitem img{
        height:100%;
    }
    .botbox{
        height: calc(100% - 100px);
        overflow-y: auto;
    }
    .listTimeContent{
        display: inline-block;
        position: fixed;
        /* text-align: right; */
        right: 1rem;
        /*right: 1rem;*/
    }
    .listErrorContent{
        display: inline-block;
        position: fixed;
        right: 1rem;
        color: red;
        font-size: 12px;
    }
    .underbox {
        display: flex;
        flex-direction: column;
    }
    /deep/ .underbox .van-tabbar-item{
        color: #999999;
    }
    /deep/ .underbox .van-tabbar-item--active {
        color:  #153744;
        background-color: #fff;
    }



</style>